<template>
    <!-- v-show  和  v- if 指令
     v-show 指令 ： 控制元素的显示和隐藏
     v-if 指令 ： 控制元素的创建和销毁
 
     同时也有v-else-if 和 v-else 指令
     v-else-if ： 相当于 if else if 必须跟在v-if 或者 v-else-if 后面
     v-else ： 相当于 else 也必须跟在 v-if 或者 v-else-if后面
     -->
     <span>这是span</span>
     <div v-if="isShow">这是v-if的盒子模型</div>
     <div v-show="isShow">这是v-for的盒子模型</div>
 <!-- v-else  -->
     <button @click="awesome = !awesome">Toggle</button>
 
 <h1 v-if="awesome">Vue is awesome!</h1>
 <h1 v-else>Oh no 😢</h1>
 
 <!-- v-for 指令是用来渲染一个数组的
 v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
 
 -->
 <hr>
 <li v-for="item in items">
     <!-- item 是数组的迭代项   items是数组对象 -->
   {{ item.message }}
 </li>
 <hr>
 <li v-for="item in arr">这个展示item的值{{ item }}</li>
 <hr>
 <li v-for="(item,index) in arr">这个展示item的下标 和 值:{{ index }}--{{ item }}</li>
 <hr></hr>
 <li v-for="(item,index) in items">这个展示item的下标 和 值:{{ index }}--{{ item }}</li>
 
 <!-- 你也可以使用 v-for 来遍历一个对象的所有属性,遍历的顺序会基于对该对象调用 Object.values() 的返回值来决定。
  -->
 
 <li v-for="value in Students">
     {{ value }}
   </li>
   <hr>
   <!-- 在遍历对象时，可以同时使用 (value, key) 的形式来获得键值对 -->
    <li v-for="(value, key) in Students">{{ key }}: {{ value }}</li>
    <hr>
    <!-- 第三个参数表示位置索引： (value,key,value)-->
    <li v-for="(value, key, index) in Students">
   {{ index }}. {{ key }}: {{ value }}


 </li>
 </template> 
 
 <script setup>
 
 import { reactive, ref } from 'vue'
 
 const isShow = ref(false)
 
 const awesome = ref(true)
 
 const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
 
 const arr = ref([1,2,3])

 const Students = reactive({
     name:'张三',
     age:18,
     sex:'男'
 
 })
 
 </script>
 
 <style  scoped>
 
 </style>